<template>
  <div>
    <el-card style="margin: 20px">
      <el-button
        type="primary"
        style="float: right; margin: 5px 5px 15px 5px"
        size="medium "
        :disabled="list.length == 3 ? true : false"
        @click="addImg"
        >添加飘窗</el-button
      >
    </el-card>
    <el-card class="box-card" style="margin: 0.3rem">
      <!-- 表格 -->
      <el-table
        :data="list"
        style="width: 100%"
        border
        stripe
        size="medium "
        :header-cell-style="{ background: '#ebeef5' }"
      >
        <el-table-column prop="connectionName" label="飘窗连接" width="180">
        </el-table-column>
        <el-table-column prop="image" label="图片">
          <template slot-scope="{ row }">
            <img :src="row.image" width="200px" height="80px" />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" icon="el-icon-edit" @click="editImg(row)"
              >编辑</el-button
            >
            <el-popconfirm
              title="确认删除这条飘窗吗？"
              @confirm="deleteWindow(row)"
            >
              <el-button type="text" icon="el-icon-delete" slot="reference"
                >删除飘窗</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加与编辑弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleFrom"
        label-width="150px"
        :model="formList"
        :rules="rules"
      >
        <el-form-item label="飘窗链接" prop="windowConnection">
          <el-select
            v-model="formList.windowConnection"
            placeholder="请选择"
            style="width: 350px"
            size="medium "
          >
            <el-option
              v-for="column in columnList"
              :key="column.id"
              :label="column.columnName"
              :value="column.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-upload
            class="avatar-uploader"
            action="/drug/file/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <div slot="tip" class="el-upload__tip">
              请上传一张图片（要设置轮播图请务必设置上传图片，大小不能超1MB,图片格式jpg,jpeg,png）
            </div>
            <img v-if="formList.image" :src="formList.image" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      // 控制弹窗字段
      dialogVisible: false,
      // 弹窗名
      title: "",
      // 链接列表
      columnList: [],
      // 表单数据
      formList: {
        // 图片地址
        image: "",
        // 飘窗链接
        windowConnection: "",
      },
      // 表单验证
      rules: {
        windowConnection: [
          { required: true, message: "请选择链接", trigger: "change" },
        ],
      },
    };
  },
  // 组件挂载完成，调用接口，获取数据
  mounted() {
    this.getList();
    this.getColumnList();
  },
  methods: {
    // 获取飘窗信息
    async getList() {
      let result = await this.$API.bayWindowSet.reqGetImgList();
      if (result.status == 200) {
        this.list = result.data;
      }
    },
    // 获取链接信息
    async getColumnList() {
      let result = await this.$API.journalism.reqGetAll();
      if (result.status == 200) {
        this.columnList = result.data;
      }
    },
    // 添加飘窗
    addImg() {
      this.dialogVisible = true;
      this.title = "新增飘窗";
      //新增打开清空表单数据
      this.formList = {
        // 图片地址
        image: "",
        // 飘窗链接
        windowConnection: "",
      };
    },
    // 编辑
    editImg(row) {
      this.dialogVisible = true;
      // 编辑打开浅拷贝数据，赋值给表单
      this.formList = { ...row };
      this.title = "修改飘窗";
    },
    // 弹窗确认按钮
    confirm() {
      this.$refs.ruleFrom.validate(async (success) => {
        if (success) {
          let result = await this.$API.bayWindowSet.reqAddOrEdit(this.formList);
          if (result.status == 200) {
            // 添加 || 修改成功，重新获取数据
            this.getList();
            this.$message({
              message: this.formList.id ? "修改成功" : "新增成功",
              type: "success",
            });
            // 关闭弹窗
            this.dialogVisible = false;
          }
        } else {
          return false;
        }
      });
    },
    // 关闭弹窗的回调 icon="el-icon-edit"
    handleClose(done) {
      this.$confirm("您还未确认保存，确认退出吗？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 文件上传成功时的钩子
    handleAvatarSuccess(res, file) {
      this.formList.image = res.data.domain + res.data.path + "?download=0";
    },
    // 上传文件之前的钩子
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 删除按钮
    async deleteWindow(row) {
      let result = await this.$API.bayWindowSet.reqDelete(row.id);
      if (result.status == 200) {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        // 删除成功冲洗获取数据
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
